<template>
	<div id="Notice">
		<div :class="[ 'ov' , opshow ? 'on':'']" @click="OpClose()"></div>
		
		<div :class="[ 'pop key btn-c-lan' , opshow ? 'on':'']">
			<div class="title">{{opNoti.title}}</div>
			<div class="info" v-html="opNoti.content" ></div>
			<!-- <div class="date">2022-4-12</div> -->
		</div>
	</div>
</template>

<script>
	
	export default {
		name: "Notice",
		data() {
			return {
				opshow:false,
				opNoti:{
					
				}
			};
		},
		mounted() {
			
		},
		methods: {
			show(e) {
				this.opshow = true;
				this.opNoti = e
				console.log(e)
			},
			OpClose() {
				this.opshow = false;
			}
		},
	};
</script>

<style lang="scss" scoped>
	.ov {
		position: fixed;
		z-index: -5;top: 0px;left: 0px;
		width: 100%;height: 100%;
		background: #000;opacity: 0;
	
		transition: all 1s;
		-webkit-transition: all 1s;
		-moz-transition: all 1s;
		-o-transition: all 1s;
	
		&.on {
			z-index: 98;
			opacity: 0.5;
		}
	}
	
	.pop{
		position: fixed;
		text-align: center;
		top: 50%;
		left: 50%;
		z-index: -1;
		opacity: 0;
		border-radius: 10px;
		overflow: hidden;
		
		
		transform: translate(-50%, -50%) scale(2, 2);
		-webkit-transform: translate(-50%, -50%) scale(2, 2);
		-moz-transform: translate(-50%, -50%) scale(2, 2);
		-ms-transform: translate(-50%, -50%) scale(2, 2);
		-o-transform: translate(-50%, -50%) scale(2, 2);
		
		
		transition: all 1s;
		-webkit-transition: all 1s;
		-moz-transition: all 1s;
		-ms-transition: all 1s;
		-o-transition: all 1s;
		
		&.on {
			opacity: 1;
			z-index: 99;
			transform: translate(-50%, -50%) scale(1);
			-webkit-transform: translate(-50%, -50%) scale(1);
			-moz-transform: translate(-50%, -50%) scale(1);
		}
		
	}
	
	.key{
		width:400px;
		padding:30px;
		border-radius:10px;
		background-color: #f1b468;
		color: #333;
	}
	
	.title{
		font-size: 32px;
		text-align: center;
	}
	.info{
		margin-top: 20px;
		font-size: 28;
		text-align: left;
		max-height: 300px;
		overflow-y: scroll;
	}
	.date{text-align: right; margin-top: 30px;}
	
</style>
